<template>
  <div class="cinemas">
    <van-nav-bar title="影院" fixed>
      <template #left>
        <span @click="toCity">
          {{ cityName }}<van-icon name="arrow-down" size="13" />
        </span>
      </template>
      <template #right>
        <van-icon name="search" size="18" @click="toSearch" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu class="cinemas-nav" active-color="#ff5f16">
      <van-dropdown-item v-model="area" :options="areaOption"/>
      <van-dropdown-item v-model="ticketFlag" :options="ticketOption" />
      <van-dropdown-item v-model="last" :options="lastOption" />
    </van-dropdown-menu>
    <div class="cinemas-list">
      <cinemaItem
        v-for="cinema in showCinemas"
        :key="cinema.cinemaId"
        from="cinemas"
        :cinema="cinema"
      />
    </div>
  </div>
</template>

<script>
import cinemaItem from "@/components/cinema-item.vue";
import {mapState} from 'vuex'
export default {
  components: {
    cinemaItem,
  },
  data() {
    return {
      cinemas: [],
      cinemaIds: "",
      area: "all",
      areaOption: [{ text: "全城", value: "all" }],
      ticketFlag: 1,
      ticketOption: [
        { text: "APP购票", value: 1 },
        { text: "前台兑换", value: 2 },
      ],
      last: 1,
      lastOption: [
        { text: "最近去过", value: 1 },
        { text: "离我最近", value: 2 },
      ],
    };
  },
  created() {
    this.getCinemas();
  },
  computed: {
    ...mapState(['cityId', 'cityName']),
    showCinemas() {
      if (this.area === "all") {
        return this.cinemas;
      } else {
        return this.cinemas.filter((item) => item.districtId === this.area);
      }
    },
  },
  methods: {
    toCity() {
      this.$router.push("/city");
    },
    toSearch() {
      this.$router.push("/cinemas/search");
    },
 
    async getCinemas() {
    let res = await this.$api({
      headers: {
        "X-Host": "mall.film-ticket.cinema.list",
      },
      url: "https://m.maizuo.com/gateway",
      method: "get",
      params: {
        cityId: this.cityId,
        ticketFlag: 0,
        k: 5678404,
      },
    });
    this.cinemas = res.data.data.cinemas;
    this.getDistricts(this.cinemas);
  },
    getDistricts(cinemas) {
      let districts = [];
      cinemas.forEach((el) => {
        if (!districts.map((item) => item.value).includes(el.districtId)) {
          let obj = {
            text: el.districtName,
            value: el.districtId,
          };
          districts.push(obj);
        }
      });
      this.areaOption.push(...districts);
    },
  },
};
</script>

<style scoped>
.cinemas {
  padding-bottom: 50px;
  background: #fff;
}
.cinemas-list {
  padding-top: 100px;
}
.van-nav-bar .van-icon,
.van-nav-bar__text,
.van-nav-bar .van-icon {
  color: #000;
}
.cinemas-nav {
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
}

</style>